<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>本地视频播放器</title>
  <link rel="stylesheet" href="https://unpkg.com/xgplayer/dist/2.3.3/xgplayer.min.css">
</head>

<body>
  <div id="player"></div>

  <input type="file" id="fileInput" multiple accept="video/*">
  <button id="playBtn" disabled>播放</button>

  <script src="https://unpkg.com/xgplayer/dist/2.3.3/xgplayer.min.js"></script>
  <script>
    let player;
    const fileInput = document.getElementById('fileInput');
    const playBtn = document.getElementById('playBtn');
    const videoFiles = [];

    fileInput.addEventListener('change', () => {
      const files = fileInput.files;
      for (let i = 0; i < files.length; i++) {
        videoFiles.push(URL.createObjectURL(files[i]));
      }
      playBtn.disabled = false;
    });

    playBtn.addEventListener('click', () => {
      player = new Player({
        id: 'player',
        url: videoFiles,
        playbackRate: [0.5, 0.75, 1, 1.25, 1.5, 2], // 支持倍速播放
        autoplay: true,
        loop: true
      });
    });
  </script>
</body>

</html>